<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>小兔鲜儿-新鲜、惠民、快捷！</title>
    <meta content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。" name="description">
    <meta content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物" name="keywords">
    <link href="favicon.ico" rel="shortcut icon" type="image/x-icon">

    <!-- base.css放在最上面, 后面的特殊index.css样式能覆盖base.css的公共样式 -->
    <link href="./css/base.css" rel="stylesheet">
    <link href="./css/common.css" rel="stylesheet">
    <link href="./css/index.css" rel="stylesheet">
    <!-- 这个animate.js 必须写到 index.js的上面引入 -->
    <script src="js/animate.js"></script>
    <!-- 引入我们首页的js文件 -->
    <script src="js/index.js"></script>
</head>
<body>

<!-- 头部模块 -->
<header>

    <!-- 快捷菜单模块 -->
    <div class="xtx-shortcut">

        <!-- 版心的盒子 -->
        <nav class="container">
            <ul class="fr">
                <li><a href="#">请先登录</a>|</li>
                <li><a href="#">免费注册</a>|</li>
                <li><a href="#">我的订单</a>|</li>
                <li><a href="#">会员中心</a>|</li>
                <li><a href="#">帮助中心</a>|</li>
                <li><a href="#">在线客服</a>|</li>
                <!-- 使用一个img标签实现  -->
                <!--<li><a href="#"><img alt="" class="iphone" src=""> 手机版</a></li>-->
                <!-- 使用伪元素的方式实现-->
                <li><a href="#">手机版</a></li>
            </ul>
        </nav>
    </div>

    <!-- 主导航模块-->
    <div class="xtx-main-nav container">
        <!-- logo     ->  快速写法 h1.logo.fl -->
        <h1 class="logo fl">
            <!-- SEO优化-->
            <a href="#">小兔鲜</a>
        </h1>

        <!-- 导航 -->
        <nav class="nav fl">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">生鲜</a></li>
                <li><a href="#">美食</a></li>
                <li><a href="#">餐厨</a></li>
                <li><a href="#">电器</a></li>
                <li><a href="#">居家</a></li>
                <li><a href="#">洗护</a></li>
                <li><a href="#">孕婴</a></li>
                <li><a href="#">服装</a></li>
            </ul>
        </nav>

        <!-- 搜索 -->
        <div class="search fl">
            <label>
                <!-- input 的搜索框类型, 存在自动内减的功能 -->
                <input placeholder="搜一搜" type="search">
            </label>
        </div>

        <!-- 购物车 -->
        <div class="cart fl">
            <span>2</span>
        </div>
    </div>
</header>

<!-- 网站入口 -->
<div class="xtx-entry">
    <div class="container">
        <!-- 轮播图 结构 -> ul>li>a>img  -->
        <ul class="focus">
            <li>
                <a href="#">
                    <img alt="#" src="uploads/banner_1.png">
                    <!--<img alt="#" src="uploads/item_4.png">-->
                </a>
            </li>
            <li>
                <a href="#">
                    <img alt="#" src="uploads/item_2.png">
                </a>
            </li>
            <li>
                <a href="#">
                    <img alt="#" src="uploads/item_3.png">
                </a>
            </li>
        </ul>
        <!-- 商品分页的侧边栏: aside -->
        <aside class="category">
            <!-- 侧边栏上的菜单树  用 ul>li 来实现  Shift + Alt + Insert 进入多行编辑模式 | 需要再次按下快捷键手动关闭 -->
            <ul>
                <li><a href="#"><span>生鲜</span> 水果 蔬菜</a></li>
                <li><a href="#"><span>美食</span> 面点 干果</a></li>
                <li><a href="#"><span>餐厨</span> 数码产品</a></li>
                <li><a href="#"><span>电器</span> 床品 四件套 被枕</a></li>
                <li><a href="#"><span>居家</span> 奶粉 玩具 辅食</a></li>
                <li><a href="#"><span>洗护</span> 洗发 洗护 美妆</a></li>
                <li><a href="#"><span>孕婴</span> 奶粉 玩具</a></li>
                <li><a href="#"><span>服饰</span> 女装 男装</a></li>
                <li><a href="#"><span>杂货</span> 户外 图书</a></li>
                <li><a href="#"><span>品牌</span> 品牌制造</a></li>
            </ul>
        </aside>

        <!-- 轮播图上面的左右箭头 -->
        <a class="prev" href="javascript:;">←</a>
        <a class="next" href="javascript:;">→</a>

        <!-- 轮播图指示器 -->
        <ol class="indicator">
            <!--<li></li>
            <li></li>
            &lt;!&ndash; 后期扩展使用 &ndash;&gt;
            <li class="active"></li>
            <li></li>
            <li></li>-->
        </ol>
    </div>
</div>

<!-- 新鲜好物模块 -->
<div class="xtx-new-goods">
    <div class="container">
        <!-- 好物模块的头部 -->
        <div class="goods-hd">
            <h2>新鲜好物</h2>
            <span>新鲜出炉 品质靠谱</span>
            <a href="#">查看全部</a>
        </div>

        <!-- 好物模块的列表 -->
        <ul class="goods-list">
            <li>
                <a href="#">
                    <img alt="" src="uploads/new_goods_1.jpg">
                    <h3>睿米无线吸尘器F8</h3>
                    <p><span>¥</span> 899</p>
                    <span class="new-product">新品</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img alt="" src="uploads/new_goods_2.jpg">
                    <h3>智能环绕3D空调</h3>
                    <p><span>¥</span> 1299</p>
                    <span class="new-product">新品</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img alt="" src="uploads/new_goods_3.jpg">
                    <h3>广东软软糯米煲仔饭</h3>
                    <p><span>¥</span> 129</p>
                    <span class="new-product">新品</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img alt="" src="uploads/new_goods_4.jpg">
                    <h3>罗西机械智能手表</h3>
                    <p><span>¥</span> 3399</p>
                    <span class="new-product">新品</span>
                </a>
            </li>
        </ul>
    </div>
</div>


<!-- todo 实现生鲜商品 和 最新专题模块 -->
<!-- 生鲜商品 -->
<div class="xtx-fresh-goods container">
</div>

<!-- 最新专题 -->
<div class="xtx-topics">
    <div class="container">
    </div>
</div>

<!-- 底部模块 -->
<footer>
    <!-- 联系方式 -->
    <div class="xtx-contact">
        <div class="cus-service">
            <span>客户服务</span>
            <div class="online-customer">
                <div class="img"></div>
                <a class="common-cus-a" href="#">在线客服</a>
            </div>
            <div class="feedback">
                <div class="img"></div>
                <a class="common-cus-a" href="#">问题反馈</a>
            </div>
        </div>
        <div class="follow">
            <span>关注我们</span>
            <div class="weixin">
                <div class="img"></div>
                <a class="common-cus-a" href="#">公众号</a>
            </div>
            <div class="weibo">
                <div class="img"></div>
                <a class="common-cus-a" href="#">微博</a>
            </div>
        </div>
        <div class="download">
            <span>下载APP</span>
            <div class="code">
                <!-- 可以在样式里面设置font-size: 0 隐藏a标签的文字-->
                <a href="#">二维码</a>
            </div>
            <div class="down-desc">
                <!-- bug点: br标签导致定位出现问题 -->
                <span>扫描二维码</span>
                <span>立马下载APP</span>
                <a href="#">下载页面</a>
            </div>
        </div>
        <div class="service-hotline">
            <span>服务热线</span><br>
            <span>400-0000-000</span><br>
            <span>周一至周日 8:00-18:00</span>
        </div>

    </div>

    <!-- 宣传信息 -->
    <div class="xtx-service">
        <!-- 版心盒子 -->
        <div class="container">
            <a href="#">价格亲民</a>
            <a href="#">物流快捷</a>
            <a href="#">品质新鲜</a>
        </div>
    </div>

    <!-- 版权信息-->
    <div class="xtx-copyright">
        <!-- 版心盒子 -->
        <div class="container clearfix">
            <p>
                <!-- a标签换行自动存在一个 空格的 -->
                <a href="#">关于我们</a> |
                <a href="#">帮助中心</a> |
                <a href="#">售后服务</a> |
                <a href="#">配送与验收</a> |
                <a href="#">商务合作</a> |
                <a href="#">搜索推荐</a> |
                <a href="#">友情链接</a>
            </p>
            <p>CopyRight @ 小兔鲜儿</p>
        </div>
    </div>
</footer>
</body>
</html>
